<template>
    <div id="userLoginView">
      <h2 style="margin-bottom: 16px">用户登录</h2>
      <a-form
        style="max-width: 480px; margin: 0 auto"
        label-align="left"
        auto-label-width
        :model="form"
        @submit="handleSubmit"
      >
        <a-form-item field="username" label="账号">
          <a-input v-model="form.username" placeholder="请输入账号" />
        </a-form-item>
        <a-form-item field="password" tooltip="密码不少于 8 位" label="密码">
          <a-input-password
            v-model="form.password"
            placeholder="请输入密码"
          />
        </a-form-item>
        <a-form-item>
          <a-button type="primary" @click="toRegister()" class="register">
            注册
          </a-button>
          <a-button type="primary" html-type="submit" class="login">
            登录
          </a-button>
        </a-form-item>
      </a-form>
    </div>
  </template>
  
  <script setup lang="ts">
  import { reactive } from "vue";
  import { UserControllerService, UserLoginRequest } from "../../../generated";
  import message from "@arco-design/web-vue/es/message";
  import { useRouter } from "vue-router";
  import { useStore } from "vuex";
  
  /**
   * 表单信息
   */
  const form = reactive({
    username: "",
    password: "",
  } as UserLoginRequest);
  
  const router = useRouter();
  const store = useStore();
  
  /**
   * 提交表单
   * @param data
   */
  const handleSubmit = async () => {
    const res = await UserControllerService.userLoginUsingPost(form);
    // 登录成功，跳转到主页
    if (res.code === 0) {
      await store.dispatch("user/getLoginUser");
      router.push({
        path: "/",
        replace: true,
      });
    } else {
      message.error("登陆失败，" + res.message);
    }
  };

  const toRegister = () => {
    router.push({
    path: `/user/register`,
  });
  }
  </script>
  
<style>

.register {
  width: 120px;
  margin-right: 10%;
}

.login {
  width: 120px;
  margin-left: 10%;
}

</style>